/* pre {outline: 1px solid #ccc; padding: 15px; margin: 15px; }
.string { color: green; border: 1px solid #ccc; padding: 15px; margin: 15px;}
.number { color: darkorange; border: 1px solid #ccc;  padding: 15px; margin: 15px;}
.boolean { color: blue; border: 1px solid #ccc;  padding: 15px; margin: 15px;}
.null { color: magenta; border: 1px solid #ccc;  padding: 15px; margin: 15px;}
.key { color: red; border: 1px solid #ccc;padding: 15px; margin: 15px;} */
.json {
  background: #f2f2f2;
  padding: 2rem;
  margin: 2rem;
  /* first line not indented */
}
.json > .line {
  margin-left: 0;
}
.json .line {
  margin-left: 1rem;
}
.json .key {
  margin-right: 0.5rem;
  color: black;
  font-weight: 600;
}
.json .string {
  color: green;
}
.json .string .json {
  background: #f2f2f2;
  padding: 2rem;
  margin: 2rem;
  /* first line not indented */
}
.json .string .json > .line {
  margin-left: 0;
}
.json .string .json .line {
  margin-left: 1rem;
}
.json .string .json .key {
  margin-right: 0.5rem;
  color: black;
  font-weight: 600;
}
.json .string .json .string {
  color: green;
}
.json .string .json .number {
  color: blue;
}
.json .string .json .boolean {
  color: purple;
}
.json .string .json .null {
  color: red;
}
.json .number {
  color: blue;
}
.json .boolean {
  color: purple;
}
.json .null {
  color: red;
}
